<script lang="ts" setup>
	import { ref, reactive, onMounted, getCurrentInstance,computed,watch } from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import DaDropdown from '@/components/da-dropdown/index.vue'
	import workerCard from "@/components/worker-card/worker-card.vue"
	import workerTabbar from "@/components/worker-tabbar/worker-tabbar.vue"
	import {
		userStore
	} from '@/pinia';	
	import cityAllData from '@/common/cityAllData.js'
	import categoryList from '@/common/categoryList.js'
	let newCityData = ref(cityAllData)
	let newCategoryList = ref(categoryList)
	
	let obj = {
		name: '不限',
		id: '',
		chindren: []
	}
	if(newCityData.value[0].id!=''){
		newCityData.value.unshift(obj)
	}
	if(newCategoryList.value[0].id!=''){
		newCategoryList.value.unshift(obj)
	}
	
	import {
		onShow,
		onHide,
		onLoad,
		onBackPress, onReachBottom
	} from '@dcloudio/uni-app'
	const userStoreInfo = userStore();
	const router = useRouter()
	onBackPress(() => {
		router.pushTab({
			name: 'index',
			params: {}
		})
	})
	

	
	const { proxy } = getCurrentInstance()
	let state = reactive({
		total: 0,
		pageNo: 1,
		pageSize: 10,
		areaId:'',
		cityId:'',
		provinceId:'',
		positionId2:'',
		age:'',
		jobId:'',
		isCertification:'',
		workExperienceTime:'',
		god1:'',
		id: '',
		scrollJin: [], //招聘分类
		currentObj: {},//当前选中的分类
		list: [],//招聘分类下的岗位
	})

	let searchWord = ref("")

	const searchPage = () => {
		router.push({
			name: 'jobSearchPage',
			params: {
				type: 'worker'
			}
		})
		
		// console.log("state========",state.list.toLowerCase())
		// meiyeRecruitHunterInfo3List()
		// console.log("searchWord",searchWord.value)
		// router.push({
		// 	name: 'searchPage',
		// 	params: {
		// 		type: 'job'
		// 	}
		// })
	}
	
	  // const filteredItems = computed(() => {
	  //     const search = searchWord.value.toLowerCase();
	  //     return state.list.filter(item => item.name.toLowerCase().includes(search));
	  //   });

	const DaDropdownRef = ref()
	const dropdownMenuList = ref([
		{
			title: '岗位',
			type: 'picker',
			prop: 'positionId2',
			// showAll: true,
			showIcon: true,
			field: {
				label: 'name',
				value: 'id',
				children: 'chindren',
			},
			value:[],
			options:userStoreInfo.getZpClassifyList,	
			// syncDataFn: userStoreInfo.getZpClassifyFun
		},
		{
			title: '年龄',
			type: 'cell',
			prop: 'age',
			// showAll: true,
			showIcon: true,
			// value: '2', // 默认内容2
			options: [
				{label: '不限',value:''},
				{label: '18-25',value:0},
				{label: '25-35',value:1},
				{label: '35以上',value:2},
	
			],
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		{
			title: '国家认证人才',
			type: 'cell',
			prop: 'isCertification',
			// showAll: true,
			showIcon: true,
			// value: '2', // 默认内容2
			options: [
				{label: '不限',value:''},
				{ label: '是', value: '1'},
				{ label: '否', value: '0' }
			],
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		{
			title: '工龄',
			type: 'cell',
			prop: 'workExperienceTime',
			// showAll: true,
			showIcon: true,
			// value: '2', // 默认内容2
			options: [
				{label: '不限',value:''},
				{label: '3年以内',value:0},
				{label: '3-5年',value:1},
				{label: '6年以上',value:2},

			],
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		{
			title: '区域',
			type: 'picker',
			prop: 'city',
			showIcon: true,
			field: {
				label: 'name',
				value: 'id',
				children: 'children',
			},
			options:userStoreInfo.addressList
		},
		{
			title: '好评榜',
			type: 'cell',
			prop: 'god1',
			showIcon: true,
			options: [
				{label: '不限',value:''},
				{label: '优秀',value:0},
				{label: '良好',value:1},
				{label: '普通',value:2}
			],
			// value: '2', // 默认内容2
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		{
			title: '职位',
			type: 'cell',
			prop: 'jobId',
			showIcon: true,
			field: {
				label: 'jobName',
				value: 'id',
				children: 'chindren',
			},
			options: userStoreInfo.getMeiyeRecruitJob3List,
			value: userStoreInfo.getMeiyeRecruitJob3List.length>0?userStoreInfo.getMeiyeRecruitJob3List[0].id:'', // 默认内容2
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		}
	])
	watch(() => userStoreInfo.getZpClassifyList,
	  (v) => {
	    console.log('watch',v)
		dropdownMenuList.value[0].options = v
	  }, { immediate: true, deep: true })
	

	const handleConfirm = (v) => {
	
		if (v.city) {
			if(v.city[0]!=null && JSON.stringify(v.city[0])!='{}'){
				state.areaId = (v.city && v.city.length>2)?v.city[2]:''
				state.cityId = (v.city && v.city.length>1)?v.city[1]:''
				state.provinceId = (v.city && v.city.length>0)?v.city[0]:''
			}else{
				state.areaId = ''
				state.cityId = ''
				state.provinceId = ''
				dropdownMenuList.value[4].value = []
			}
			
		} else if (v.positionId2) {
			if(v.positionId2[0]){
				state.positionId2 = v.positionId2[v.positionId2.length-1]
			}else{
				state.positionId2 = ''
			}
		} else {
			Object.keys(v).forEach(key => {
				state[key] = v[key]
			})
		}
		
		state.list = []
		state.pageNo = 1
		meiyeRecruitHunterInfo3List()
	}
	const handleClose = (v) => {
		console.log('handleClose ==>', v)
	}
	const handleOpen = (v) => {
		console.log('handleOpen ==>', v)
	}
	const handleSwitchChange = (event, item, index) => {
		console.log('handleSwitchChange ==>', event, item, index)
		dropdownMenuList.value[index].value = event.detail.value === true ? 1 : 0
		// 操作完成后关闭弹窗
		DaDropdownRef.value?.handlePopupHide()
	}
	
	const getCategoryList = () => {
		proxy.$req('GET', proxy.$api.getCategoryList, {}).then((res) => {
			console.log(res);
			if (res.code === 200) {
				state.scrollJin = res.result
				
				if(res.result && res.result.length > 0){
					let idx = res.result.findIndex(el=>el.id== state.id)
					if(idx!=-1){
						state.currentObj = res.result[idx]
					}else{
						state.currentObj =res.result[0]
					}
					
				}
				userStoreInfo.getZpClassifyFun(state.currentObj.id)
			
			}
		})
	}
	

	//获取招聘分类
	const getZpClassify = () => {
		// proxy.$req('GET', proxy.$api.meiyeRecruitCategory2CategoryList2, { id: state.id }).then((res) => {
		// 	console.log(res);
		// 	if (res.code === 200) {
		// 		if (res.result.length > 0) {
		// 			let obj = {
		// 				name:'不限',
		// 				id:'',
		// 				chindren:[]
		// 			}
		// 			res.result.unshift(obj)
		// 			dropdownMenuList.value[0].options = res.result
		// 		} 
		// 		meiyeRecruitHunterInfo3List()
		// 	}
		// })
		state.list = []
		state.pageNo = 1
		meiyeRecruitHunterInfo3List()
	}
	//获取招聘职位分页列表查询
	const meiyeRecruitHunterInfo3List = () => {
		// positionId: 1 || state.currentObj.id,
		let params = {
			positionId:state.id,
			pageNo: state.pageNo,
			pageSize: state.pageSize,
			areaId:state.areaId,
			cityId:state.cityId,
			provinceId:state.provinceId,
			username:searchWord.value,
			jobId:state.jobId,
			positionId2:state.positionId2,
			age:state.age,
			isCertification:state.isCertification,
			workExperienceTime:state.workExperienceTime,
			god1:state.god1

		}
		proxy.$req('GET', proxy.$api.meiyeRecruitHunterInfo3List, params).then((res) => {
			console.log(res);
			if (res.code === 200) {
				state.total = res.result.total
				state.list = state.list.concat(res.result.records)
			}
		})
	}

	// 获取地区
	const getAddressTree = () => {
		//获取地区
		// proxy.$req('GET', proxy.$api.getAddressTree, {}).then((res) => {
		// 	let obj = {
		// 		name:'不限',
		// 		id:'',
		// 		children:[]
		// 	}
		// 	res.result.unshift(obj)
		// 	dropdownMenuList.value[4].options = res.result
		// })
	}

	onReachBottom(() => {
		if (state.total > state.list.length) {
			state.pageNo++
			meiyeRecruitHunterInfo3List()
		}
	})
	const toCall = () => {

	}
	const selectClass = (item) => {
		state.currentObj = item
		state.id = item.id
		dropdownMenuList.value[0].options = []
		dropdownMenuList.value[0].value = []
		
		userStoreInfo.getZpClassifyFun(state.currentObj.id)
		getZpClassify()
		// meiyeRecruitHunterInfo3List()

	}
	onLoad((options) => {
		let data = {}
		if (options.data) {
			uni.setStorageSync('workerData', options.data)
			data = JSON.parse(options.data)
		} else {
			let newData = uni.getStorageSync('workerData')
			data = JSON.parse(newData)
		}
		state.id = data.id
		
		// let cityObj = JSON.parse(uni.getStorageSync('cityInfo'))
		// state.areaId = cityObj.areaId || ''
		// state.cityId = cityObj.cityId|| ''
		// state.provinceId = cityObj.provinceId || ''
		// dropdownMenuList.value[4].value=[state.provinceId,state.cityId,state.areaId]
		state.jobId = userStoreInfo.getMeiyeRecruitJob3List.length>0?userStoreInfo.getMeiyeRecruitJob3List[0].id:''
		getCategoryList()

		
		getZpClassify()

		getAddressTree()
	})
	const clickTabs = (item)=>{
		console.log(item,'clickTabs')
		state.jobId = item.id
		state.list = []
		state.pageNo = 1
		meiyeRecruitHunterInfo3List()
	}
	onShow(async() => {
		await userStoreInfo.meiyeRecruitJob3ListFun()
	})
</script>
<template>
	<view class="page-main">
		<view class="navbar">
			<u-navbar :placeholder="true" leftText="" title="" auto-back>
				<template #center>
					<view style="width: 80%;" @click="searchPage">
						<u-search placeholder="搜索" v-model="searchWord" :showAction="false"></u-search>
					</view>
				</template>
				<template #right>
					<u-icon name="plus"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="fixedTop">
			<view class="scrollList">
				<u-scroll-list :indicator="false">
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in state.scrollJin" :key="index">
							<view class="scroll-list__line__item"
								:class="[(state.currentObj.id === item.id) && 'scroll-list__line__item--no-margin-right']"
								@click="selectClass(item)">
								<image class="scroll-list__line__item__image" :src="state.currentObj.id === item.id?item.url2:item.url" mode="">
								</image>
								<text v-if="item.name.length<5" class="scroll-list__line__item__text"> {{ item.name.substring(0, 2) }}人才</text>
								<text v-if="item.name.length>=5" class="scroll-list__line__item__text"> {{ item.name.substring(0, 3) }}人才</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		<!-- 	<view class="tabsBox">
				<u-tabs v-if='userStoreInfo.getMeiyeRecruitJob3List.length>0' :list="userStoreInfo.getMeiyeRecruitJob3List" keyName="jobName" @click="clickTabs" lineColor="#CB645E" lineWidth="30"></u-tabs>
				<view v-else style="height:80rpx;line-height:80rpx;color:#00000073;font-size:24rpx;">当前没有职位，请先新增</view>
			</view> -->
			<view class="DaDropdown-main">
				<DaDropdown ref="DaDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#CB645E"
					textColor="#333333" :duration="300" textSize="24rpx" :fixedTop="false" :menuActiveText="false" @confirm="handleConfirm"
					@close="handleClose" @open="handleOpen" class="workDaDropDown">
					<!-- <template #god7="{item,index}">
						<view style="padding: 40px">
							自定义插槽内容
							<switch :checked="item.value === 1" @change="(e) => handleSwitchChange(e, item,index)" />
							<text>{{ item.value === 1 ? '激活' : '未激活' }}</text>
						</view>
					</template> -->
				</DaDropdown>
			</view>
		</view>

		<view class="card-box">
			<worker-card :list="state.list" :jobId="state.jobId" @toCall="toCall"></worker-card>
		</view>
		<view class="">
			<worker-tabbar name="worker"></worker-tabbar>
		</view>
	</view>

</template>
<style lang="scss" scoped>
	page {
		background: #f6f6f6;
		height: 100%;
	}
	.page-main {
		height: 100%;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.fixedTop{
		position:fixed;
		top:84rpx;
		left:0;
		right:0;
		z-index:10;
		background: #FAFAFAFF;
	}
	

	.navbar {
		width: 100%;
		height: 100rpx;
	}

	.scrollList {
		width: 90%;
		/* #ifdef APP-PLUS */
		margin: 56rpx auto 0;
		/* #endif */
		/* #ifndef APP-PLUS */
		margin: 30rpx auto 0;
		/* #endif */
		

		.scroll-list {
			@include flex;
			// @include flex(column);
			flex-wrap: wrap;
			width: 100%;

			&__line {
				width: 20%;
				@include flex;
				margin-top: 10rpx;

				&__item {
					@include flex(column);
					align-items: center;
					// margin-right: 42rpx;

					&__image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						box-sizing: border-box;
					}

					&__text {
						margin-top: 5rpx;
						color: $u-content-color;
						font-size: 24rpx;
						text-align: center;
					}

					&--no-margin-right {
						// margin-right: 0;
						// margin-right: 0;

						// .scroll-list__line__item__image {
						// 	border: 2rpx solid red;
						// }

						// .scroll-list__line__item__text {
						// 	color: red;
						// }
					}
				}
			}
		}
	}
	.tabsBox{
		padding:0 20rpx;
		background:#fff;
		margin-bottom:16rpx;
	}

	.DaDropdown-main {
		position: relative;
		border-bottom: 1rpx solid #eee;
	}
	
	::v-deep .workDaDropDown{
		
		.da-dropdown-menu-item{	
			min-width:180rpx !important;
			.da-dropdown-menu-item--text{
			}
		}
	}


	.screening {
		width: 100%;
		height: 100rpx;
		background-color: #000;
	}

	.card-box {
		margin-top:400rpx;
		padding-bottom:100rpx;
		// padding:16rpx;
	}
</style>